<template>
  <div>
    <el-dialog
      v-loading.lock="loading"
      class="base-dialog system-user-dialog"
      :custom-class="'panna-dialog_big'"
      :append-to-body="true"
      :title="dataList.CalibTask"
      align="center"
      :close-on-click-modal="false"
      :visible.sync="innerDialogFormVisible"
    >
      <DeviceCalibrationTaskView :id="id"></DeviceCalibrationTaskView>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" @click="print('formData')">{{
          btn.Print
        }}</el-button>
        <el-button @click="cancel">{{ btn.Cancel }}</el-button>
      </div>
    </el-dialog>
    <DeviceCalibrationTaskExportView
      v-if="dialogFormExportViewVisible"
      :id.sync="id"
      ref="dialogFormExportViewVisible"
      :print-state.sync="printState"
      :dialog-form-visible.sync="dialogFormExportViewVisible"
    />
  </div>
</template>

<script>
import { get } from "../../../api/DeviceCalibrationTask";
import { mapGetters } from "vuex";
import { normal, reportCertificateTable } from "../../../utils/const";
import DeviceCalibrationTaskView from "./DeviceCalibrationTaskView.vue";
import DeviceCalibrationTaskExportView from "./DeviceCalibrationTaskExportView.vue";
export default {
  name: "DeviceCalibrationTaskViewDialog",
  components: { DeviceCalibrationTaskView, DeviceCalibrationTaskExportView },
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: "",
    },
  },

  data() {
    return {
      normal: normal,
      printState: false,
      dialogFormExportViewVisible: false,
      styleCSS: "text-align:left",
      verificationObjectList: [],
      returnObjct: true,
      choiceDeviceVisible: false,
      reportCertificateTable: reportCertificateTable,
      list: [],
      listDeviceVerification: [],
      loading: false,
      innerDialogFormVisible: false,
      formData: {
        id: 0,
        calibrationPersonId: this.$store.getters.currentUserId,
        calibrationPersonName: this.$store.getters.name,
        calibrationDate: new Date(),
        certificateNo: "",
        company: "",
        content: "",
        imgArray: [],
        fileArray: [],
        sysBusinessImgWarehouseList: [],
        sysBusinessFileWarehouseList: [],
        conclusion: 10,
        calibrationDateNext: null,
        deviceStatus: normal,

        num: "",
        deviceNum: "",
        calibrationPlanNum: "",
        type: 0,
        typeName: "",
        verificationObject: "",
        verificationWay: "",
        planDate: 0,
        status: 0,
        statusName: "",
        remark: "",
        conclusionName: "",
        conclusionReason: "",
        deviceStatusName: "正常",
        projectResultInfo: 0,
        projectResultInfoName: "",
        projectResultRang: 0,
        projectResultRangName: "",
        projectResultSure: 0,
        projectResultSureName: "",
        projectResultPrecise: 0,
        projectResultPreciseName: "",
        projectResultCover: 0,
        projectResultCoverName: "",
        deviceId: 0,
      },
    };
  },
  computed: {
    ...mapGetters(["fileDomain", "fileBucket"]),
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },
  watch: {
    dialogFormVisible(val) {
      this.innerDialogFormVisible = val;
    },
    innerDialogFormVisible(val) {
      this.$emit("update:dialogFormVisible", val);
    },
  },
  created() {
    this.innerDialogFormVisible = this.dialogFormVisible;
    this.init();
  },
  methods: {
    init() {
      get({ id: this.id }).then((res) => {
        this.formData.fileArray = [];
        res.data.sysBusinessFileWarehouseList.map((item) => {
          var obj = item;
          obj.name = item.originalFileName;
          // obj.url = `${this.$baseProtocol}//${this.fileDomain}/${this.fileBucket}/${item.filePath}`;
          obj.url = `${item.filePath}`;
          this.formData.fileArray.push(obj);
        });
        this.formData.imgArray = [];
        res.data.sysBusinessImgWarehouseList.map((item) => {
          var obj = item;
          obj.name = item.originalFileName;
          // obj.url = `${this.$baseProtocol}//${this.fileDomain}/${this.fileBucket}/${item.filePath}`;
          obj.url = `${item.filePath}`;
          obj.imgUrl = item.filePath;
          this.formData.imgArray.push(obj);
        });

        this.reportCertificateTable[0].result = res.data.projectResultInfo;
        this.reportCertificateTable[0].content = res.data.projectResultInfoName;

        this.reportCertificateTable[1].result = res.data.projectResultRang;
        this.reportCertificateTable[1].content = res.data.projectResultRangName;

        this.reportCertificateTable[2].result = res.data.projectResultSure;
        this.reportCertificateTable[2].content = res.data.projectResultSureName;

        this.reportCertificateTable[3].result = res.data.projectResultPrecise;
        this.reportCertificateTable[3].content =
          res.data.projectResultPreciseName;

        this.reportCertificateTable[4].result = res.data.projectResultCover;
        this.reportCertificateTable[4].content =
          res.data.projectResultCoverName;

        this.formData = res.data;
        if (res.data.conclusion === 0) {
          this.formData.conclusion = 10;
        }
        if (res.data.deviceStatus === 0) {
          this.formData.deviceStatus = this.normal;
          this.formData.deviceStatusName = this.dataList.Normal;
        }
        this.formData.deviceStatus = String(res.data.deviceStatus);
        this.list = res.data.deviceDtos;
        this.listDeviceVerification = [];
        this.listDeviceVerification.push({
          verificationWay: res.data.verificationWay,
          verificationObject: res.data.verificationObject,
        });
      });
    },
    cancel() {
      this.innerDialogFormVisible = false;
    },
    print() {
      this.printState = true;
      this.dialogFormExportViewVisible = true;
    },
    getUrl(url) {
      // var res = `${this.$baseProtocol}//${this.fileDomain}/${this.fileBucket}/${url}`;
      var res = `${url}`;
      return res;
    },
    closeDialog() {
      this.$parent.getList();
      this.cancel();
    },
    onSubmit() {},
  },
};
</script>
<style scoped lang="scss">
.deviceAddDialogFile {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  height: 150px;
  ::v-deep.base-upload {
    text-align: left;
    display: flex;
    flex-direction: column;
    padding-top: 10px;
    width: 100%;
  }
  ::v-deep .el-upload-list__item {
    width: 50%;
  }
  ::v-deep .el-upload {
    text-align: left;
  }
  ::v-deep .el-upload-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow-y: auto;
  }
  ::v-deep .el-upload__tip {
    color: red;
  }
}
.deviceAddDialogImg {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  height: 150px;
  ::v-deep .el-upload--picture-card {
    width: 116px;
    height: 88px;
    border: 1px solid #dcdfe6;
  }
  ::v-deep .el-upload-list__item {
    width: 116px;
    height: 88px;
    border: 1px solid #dcdfe6;
  }
  ::v-deep.el-upload {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  ::v-deep .tip-text {
    color: red !important;
    font-size: 12px;
  }
  ::v-deep .el-upload-list--picture-card {
    margin-left: 10px;
  }

  ::v-deep .base-upload {
    display: flex;
    flex-direction: row-reverse;
    margin-top: 10px;
  }
}
</style>
